<template>
  <div>
    <!-- 选择头像 -->
    <el-dialog title="" v-model="visibleAvatar" width="550px" :append-to-body="true" :close-on-click-modal="false"
      @close="visibleAvatarClose">
      <div>
        <el-form ref="form" :model="formInfo">
          <div class="avatar_preview">
            <div class="avatar_preview_title">头像预览</div>
            <div class="avatar_preview_div" :style="{ backgroundColor: `rgba(${formInfo.bgColor},.15)` }">
              <div class="avatar_text" :style="{ color: `rgb(${formInfo.bgColor})` }">{{ formInfo.titleText }}</div>
            </div>
          </div>
          <el-form-item label="自定义头像文字">
            <el-input v-model="formInfo.titleText" maxlength="1"></el-input>
            <div>
              <svg-icon icon-class="mianxingdianji"></svg-icon>
              <span>只能输入一个字哦~</span>
            </div>
          </el-form-item>
          <el-form-item label="自定义头像颜色">
            <div class="avatar_color">
              <div v-for="(v, i) in bgColorList" :key="i" class="item" :style="{ backgroundColor: `rgba(${v},.15)` }"
                :class="[formInfo.bgColor == v ? 'active' : '']" @click="colorClick(v)">
                <div class="avatar_text" :style="{ color: `rgb(${v})` }">{{ formInfo.titleText }}</div>
              </div>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
        <el-button @click="visibleAvatarClose">取 消</el-button>
        <el-button type="primary" @click="confirmAvatarClick">确 定</el-button>
      </span>
      </template>
      
    </el-dialog>
  </div>
</template>

<script setup name="yu-context-avatar" lang="ts">
const { proxy } = getCurrentInstance() as any;
const visibleAvatar = ref(false)
const bgColorList = ref(["0,170,255", "206,173,7", "244,54,130", "87,71,255", "9,183,0", "255,155,0"])
const formInfo = ref({
  titleText: "",
  bgColor: "0,170,255",
})
const emit = defineEmits(['confirmAvatarClick'])

const colorClick = (v: string) => {
  formInfo.value.bgColor = v;
}; 
const visibleAvatarClose = () => {
  visibleAvatar.value = false;
  formInfo.value.titleText = "";
  formInfo.value.bgColor = "0,170,255";
};
const confirmAvatarClick = () => {
  if (formInfo.value.titleText === "") {
    proxy.$model.msgWarning("请输入标题文字");
    return;
  }
  // 假设父组件通过 v-on:confirmAvatarClick 监听此事件
  emit('confirmAvatarClick', formInfo.value);
  visibleAvatarClose();
};

defineExpose({
  visibleAvatar,
  formInfo
})
</script>


<style scoped lang="scss">
.avatar_preview {
  width: 90px;
  margin: 0 auto 20px;
  text-align: center;

  .avatar_preview_title {
    margin-bottom: 18px;
  }

  .avatar_preview_div {
    width: 90px;
    height: 90px;
    border-radius: 19px;
    text-align: center;
    line-height: 90px;
    font-size: 40px;
  }
}

.avatar_color {
  display: flex;
  justify-content: space-around;
  width: 100%;

  .item {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    font-size: 16px;
    text-align: center;
    line-height: 50px;
    cursor: pointer;
  }

  .active {
    border: 2px solid #66b1ff;
  }
}
</style>
